<template>
  <div>
    <el-form :inline="true" :model="searchModel" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input
          v-model="searchModel.searchItem.user_name"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户全名">
        <el-input
          v-model="searchModel.searchItem.user_full_name"
          placeholder="用户全名"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select
          v-model="searchModel.searchItem.user_status"
          placeholder="全部"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="有效" value="1"></el-option>
          <el-option label="无效" value="2"></el-option>
        </el-select>
        <el-form-item label="创建时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="searchModel.searchItem.begin_creator_date"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="searchModel.searchItem.end_creator_date"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form-item>
      <el-button @click="searchAdminUser">搜索</el-button>
      <el-button @click="openAdminUserAdd">添加</el-button>
    </el-form>
    <el-table ref="filterTable" :data="pageModel.data" style="width: 100%">
      <el-table-column prop="user_name" label="用户名"> </el-table-column>
      <el-table-column prop="user_full_name" label="用户姓名">
      </el-table-column>

      <el-table-column prop="user_status" label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.user_status == 1 ? 'primary' : 'success'"
            disable-transitions
            >{{ scope.row.user_status == 1 ? "有效" : "无效" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="creator_date"
        label="创建日期"
        width="150"
        align="center"
        :formatter="pageModel.last_lgoin_date"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click="openAdminUserUpdate(scope.row.user_name)"
            type="text"
            size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click="openAdminUserPwdUpdate(scope.row.user_name)"
            type="text"
            size="small"
            >修改密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="searchAdminUser"
      @current-change="searchAdminUser"
      :current-page.sync="searchModel.pageIndex"
      :page-sizes="[2, 4, 6, 8]"
      :page-size.sync="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageModel.total"
    >
    </el-pagination>
    <!--用户添加弹出层-->
    <el-dialog
      :title="editModel.editType == 1 ? '用户添加' : '用户修改'"
      :visible.sync="editModel.isShowEdit"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :model="editModel.userInfo"
        :rules="editModel.rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="用户名"
              :prop="editModel.editType == 1 ? 'user_name' : ''"
            >
              <el-input
                v-model="editModel.userInfo.user_name"
                :disabled="editModel.editType == 1 ? false : true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名" prop="user_full_name">
              <el-input v-model="editModel.userInfo.user_full_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="editModel.editType == 1">
          <el-col :span="12">
            <el-form-item label="用户密码" prop="pass_word">
              <el-input
                type="password"
                v-model="editModel.userInfo.pass_word"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码" prop="check_pass_word">
              <el-input
                type="password"
                v-model="editModel.userInfo.check_pass_word"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="用户角色" prop="roleIds">
              <el-select
                v-model="editModel.userInfo.roleIds"
                multiple
                filterable
                remote
                reserve-keyword
                placeholder="请输入角色名称"
                :remote-method="searchRoles"
                :loading="editModel.loading"
              >
                <el-option
                  v-for="item in editModel.roles"
                  :key="item.role_id"
                  :label="item.role_name"
                  :value="item.role_id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户状态">
              <el-switch
                v-model="editModel.userInfo.user_status"
                active-text="有效"
                inactive-text="无效"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
            @click="
              editModel.editType == 1 ? adminUserAdd() : adminUserUpdate()
            "
            >{{ editModel.editType == 1 ? "立即创建" : "修改保存" }}</el-button
          >
          <el-button>取消</el-button>
        </el-form-item>
        
      </el-form>
    <!-- </el-dialog>
   
        <el-dialog
          title="修改密码"
          :visible.sync="dialogVisiblePwd"
          width="30%"
         :before-close="handleClose"
        >-->
        
           
            
        
        </el-dialog> 
  </div>
</template>

<script>
export default {
  data() {
    var that = this;
    //验证modelcode是否唯一
    var vAdminUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能是空的"));
      }
      that.$axios
        .get("http://localhost:65253/api/AdminUserManager/VAdmminUserName", {
          params: { userName: that.editModel.userInfo.user_name },
        })
        .then((r) => {
          if (r.data) {
            callback();
          } else {
            callback(new Error("用户名已经被使用,请从重新输入其他用户名"));
          }
        });
    };
    var validatePass = (rule, value, callback) => {
      console.log("a");
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value !== that.editModel.userInfo.pass_word) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      pageModel: {},

      searchModel: {
        searchItem: {
          user_name: null,
          user_full_name: null,
          user_status: null,
          begin_creator_date: null,
          end_creator_date: null,
        },
        pageIndex: 1,
        pageSize: 6,
      
      },

      editModel: {
        //添加或者修改操作的model
        userInfo: {
          pass_word: "",
          check_pass_word: "",
          roleIds: [],
        },
        searchRoles: {
          pageIndex: 1,
          pageSize: 100,
          searchItem: {
            role_name: "",
          },
        },
         
        loading: false, //显示搜索角色的加载动画
        roles: [],
        isShowEdit: false, //是否显示弹出层
        editType: 1, //1 添加  2修改
        rules: {
          user_name: [
            { validator: vAdminUserName }, //验证用户名唯一
            { required: true, message: "请输入用户名" },
          ],
          user_full_name: [{ required: true, message: "请输入用户姓名" }],
          pass_word: [{ required: true, message: "请输入密码" }],
          check_pass_word: [
            { validator: validatePass }, //验证密码是否输入正确
          ],
          roleIds: [{ required: true, message: "请选择角色" }],
        },
      },
    };
  },
  created() {
    this.searchAdminUser();
  },

  methods: {
    
    //修改密码
    openAdminUserPwdUpdate(id) {
      this.$router.push("/UpdatePwd");
      sessionStorage.setItem("user_name",id);
    },
    //显示用户

    searchAdminUser() {
      this.$axios
        .post(
          "http://localhost:65253/api/AdminUserManager/SearchPage",
          this.searchModel
        )
        .then((r) => {
          this.pageModel = r.data.data;
        });
    },
    //角色显示
    searchRoles(sValue) {
      if (sValue) {
        this.editModel.loading = true;
        this.editModel.searchRoles.searchItem.role_name =
          sValue == " " ? "" : sValue;
        this.$axios
          .post(
            "http://localhost:65253/api/RoleManager/SearchPage",
            this.editModel.searchRoles
          )
          .then((r) => {
            console.log(r.data.data);
            this.editModel.loading = false;
            this.editModel.roles = r.data.data;
          });
      }
    },

    openAdminUserAdd() {
      this.editModel.isShowEdit = true;
      this.editModel.editType = 1;
      this.editModel.userInfo = {
        roleIds: [],
      };
    },
    //用户添加
    adminUserAdd() {
      this.$axios
        .post(
          "http://localhost:65253/api/AdminUserManager/AdminUserAdd",
          this.editModel.userInfo
        )
        .then((r) => {
          if (r.status == 200) {
            this.$message("添加成功");
            this.editModel.isShowEdit = false;
            this.searchAdminUser();
          } else {
            alert("添加失败");
          }
        });
    },
    //修改用户
    openAdminUserUpdate(userName) {
      this.$axios
        .get(
          "http://localhost:65253/api/AdminUserManager/GetAdminUserViewByUserName",
          {
            params: {
              userName: userName,
            },
          }
        )
        .then((r) => {
          this.editModel.userInfo = r.data.data;
          this.editModel.isShowEdit = true;
          this.editModel.roles.role_name = r.data.roles;
          this.editModel.editType = 2;
        });
    },
    adminUserUpdate() {
      this.$axios
        .post(
          "http://localhost:65253/api/AdminUserManager/AdminUserUpdate",
          this.editModel.userInfo
        )
        .then((r) => {
          if (r.status == 200) {
            this.$message("修改成功");
            this.editModel.isShowEdit = false;
            this.searchAdminUser();
          }
        });
    },
  },
};
</script>
